import React, {useEffect, useLayoutEffect, useState} from 'react';
import { Button, Space ,Divider ,Table, Modal, Form, Input, Checkbox} from 'antd';
import {useHistory,useLocation , useParams} from "react-router-dom/cjs/react-router-dom";
const Dome = function () {
    let history = useHistory()
    console.log(history)
    let [state , setState] = useState({
        num: 1,
    })
    let [ getNum, setNum] = useState(1)
    const addFn = () => {
            setState({
                ...state,
                num : state.num + 1
            })
    }
    const addNumFn = () => {
        for ( let  i=0; i<10; i++){

            setNum( item =>{
                return item+1
            })
            // setNum( getNum+1)
        }

    }


    // useEffect(() => {
    //     console.log(111)
    // })
    // useEffect(() => {
    //     console.log(222)
    // },[])
    // useEffect(() => {
    //     console.log(333)
    // },[getNum])
    // useEffect(() => {
    //     return () => {
    //         console.log(getNum)
    //     }
    // },[getNum])
    useEffect(() => {
        if(getNum===0){
            setNum(10)
        }
        console.log(getNum)
    })

    useLayoutEffect(() => {
        if(getNum===0){
            setNum(10)
        }
    })



    return <div>
        <div style={{'height': '50px'}}>{state.num}</div>
        <div style={{'height': '50px'}}> {getNum}</div>


        <Button onClick={addFn.bind(null)}>新增num1</Button>
        <Button onClick={addNumFn.bind(null)}>新增getNum</Button>
        <Button onClick={() => setNum(0)}>新增111</Button>

        {/*显式传参*/}
        <Button onClick={() =>
            history.push({
                pathname:'/a',
                search:'id=123132'
            })
            // history.push('/a')
        }>跳转a</Button>

        {/*隐式传参*/}
        <Button onClick={() =>
            history.push({
                pathname:'/c',
                state:{
                    id:11,
                    name:'wang'
                }
            })
        }>跳转c</Button>


    </div>
}

export default Dome
